<template>
  <div class="view-timeline">
    <fx-card title="基础用法">
      <fx-timeline>
        <fx-timeline-item v-for="(item,index) in timeline" :key="index" :timestamp="item.timestamp">
          {{ item.content }}
        </fx-timeline-item>
      </fx-timeline>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <br>
    <fx-card title="自定义内容">
      <fx-timeline>
        <fx-timeline-item v-for="(item,index) in timeline" :key="index" :timestamp="item.timestamp" placement="top">
          <fx-card>
            {{ item.content }}
          </fx-card>
        </fx-timeline-item>
      </fx-timeline>
      <template #hide>
        <pre v-highlight="option"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'viewTimeline',
  setup () {
    const timeline = reactive([
      {
        content: '活动按期开始',
        timestamp: '2018-04-15'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '创建成功',
        timestamp: '2018-04-11'
      }
    ])

    const base = `<fx-timeline>
  <fx-timeline-item v-for="(item,index) in timeline" :key="index" :timestamp="item.timestamp">
    {{ item.content }}
  </fx-timeline-item>
</fx-timeline>
export default defineComponent({
    setup() {
      const timeline = reactive([
        {
          content: '活动按期开始',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        }
      ])
    }
})`

    const option = `<fx-timeline>
  <fx-timeline-item v-for="(item,index) in timeline" :key="index" :timestamp="item.timestamp" placement="top">
    <fx-card>
      {{ item.content }}
    </fx-card>
  </fx-timeline-item>
</fx-timeline>
export default defineComponent({
    setup() {
      const timeline = reactive([
        {
          content: '活动按期开始',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        }
      ])
    }
})`

    return {
      base,
      option,
      timeline
    }
  }
})
</script>

<style scoped lang="scss">
.view-timeline {
}
</style>
